<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>交易趋势</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
        <link rel="stylesheet" href="../../../style/mobile/operationAnalysis.css"/>
        <link rel="stylesheet" href="../../../style/mobile/mainO.css"/>
        <style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
		</style>
	</head>
	<body style="background-color: #f3f3f7;">
		<header class="header-bar header-bar-nav">
    		<a class="header-icon header-left" href="operationDetail.html"></a>
    		<h1 class="header-title">交易趋势</h1>
    	</header>
    	
    	<div class="op-row-nt">
	    	<nav class="bespeakNav bsmt44">
			  <ul class="list-top f8">
			    <li class="on" id="item1"> <a href="javascript:void(0);">金额</a> </li>
			    <li id="item2"> <a href="javascript:void(0);"></a>笔数</li>
			    <li id="item3"> <a href="javascript:void(0);"></a>人数</li>
			  </ul>
			</nav>
			
			<div class="weekList bsmt25">
				<ul class="list-week f8">
				    <li class="on day"> <a href="javascript:void(0);">按日</a> </li>
				    <li class="week"> <a href="javascript:void(0);"></a>按周</li>
				    <li class="month"> <a href="javascript:void(0);"></a>按月</li>
				</ul>
			</div>
			
			<div class="tabCon">
				<div class="chart" id="lineChart"></div>
	    	</div>
    	</div>
    	
    	<div class="op-row">
	    	<nav class="bespeakNav">
			  <ul class="list-top f8">
			    <li class="on" id="item4" style="width: 50%;"> <a href="javascript:void(0);">笔单价</a> </li>
			    <li id="item5" style="width: 50%;"> <a href="javascript:void(0);"></a>客单价</li>
			  </ul>
			</nav>
			
			<div class="weekList bsmt25">
				<ul class="list-week f8">
				    <li class="on day2"> <a href="javascript:void(0);">按日</a> </li>
				    <li class="week2"> <a href="javascript:void(0);"></a>按周</li>
				    <li class="month2"> <a href="javascript:void(0);"></a>按月</li>
				</ul>
			</div>
			
			<div class="tabCon">
				<div class="chart" id="lineChartTwo"></div>
	    	</div>
    	</div>
    	
    	<script src="../../../script/jquery-1.10.2.min.js"></script>
	    <script src="../../../script/echarts.min.js"></script>
	    <script src="../../../script/comUr.js"></script>
    	<script type="text/javascript">
	    	var statisticsType = 'TA';
	    	var statisticsTypeTwo = 'TCR';
			var groupbyType = 'day';
			var firstXAxi = [], firstYAxi = [];
			var twoXAxi = [], twoYAxi = [];
			var thirtyDate='',weekDate='',yearDate='';
			var beginDate = getBeforeDate(7),endDate = '';
			
    		//计算时间begin
		    function getBeforeDate(n) {
		        var n = n;
		        var d = new Date();
		        var year = d.getFullYear();
		        var mon = d.getMonth() + 1;
		        var day = d.getDate();
		        if(day <= n) {
		            if(mon > 1) {
		                mon = mon - 1;
		            } else {
		                year = year - 1;
		                mon = 12;
		            }
		        }
		        d.setDate(d.getDate() - n);
		        year = d.getFullYear();
		        mon = d.getMonth() + 1;
		        day = d.getDate();
		        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
		        return s;
		    }
		    endDate = getBeforeDate(1); //今天的日期
		    thirtyDate = getBeforeDate(7); //改为前七天的日期
		    weekDate = getBeforeDate(84); //12周左右
		    yearDate = getBeforeDate(365); //前1年
    		//计算时间end
    		
    		//tab切换
			function tab(tabBnt){
				$(tabBnt).click(function(){
					var tabthis = $(this).index();
					$(this).addClass('on').siblings().removeClass('on');
					$('.tabCon').children().eq(tabthis).show().siblings().hide();
				});
				//金额
				$("#item1").click(function(){
					statisticsType = 'TA';
					firstCharts();
				});
				
				//笔数
				$("#item2").click(function(){
					statisticsType = 'TC';
					firstCharts();
				});
				
				//人数
				$("#item3").click(function(){
					statisticsType = 'TM';
					firstCharts();
				});
				
				//笔单价
				$("#item4").click(function(){
					statisticsTypeTwo = 'TCR';
					twoCharts();
				});
				
				//客单价
				$("#item5").click(function(){
					statisticsTypeTwo = 'TMR';
					twoCharts();
				});
			}
    		
			$(function(){
				tab('.list-top li')
			})
    		
			//tab切换--日-周-月
			function tabWeek(tabBnt){
				$(tabBnt).click(function(){
					var tabthis = $(this).index();
					$(this).addClass('on').siblings().removeClass('on');
					$('.tabCon').children().eq(tabthis).show().siblings().hide();
				});
				
				//按日
				$(".day").click(function(){
					groupbyType = 'day';
					beginDate = thirtyDate;
					firstCharts();
				});
				
				//按周
				$(".week").click(function(){
					groupbyType = 'week';
					beginDate = weekDate;
					firstCharts();
				});
				
				//按月--12个月
				$(".month").click(function(){
					groupbyType = 'month';
					beginDate = yearDate;
					firstCharts();
				});
				
				//按日
				$(".day2").click(function(){
					groupbyType = 'day';
					beginDate = thirtyDate;
					twoCharts();
				});
				
				//按周
				$(".week2").click(function(){
					groupbyType = 'week';
					beginDate = weekDate;
					twoCharts();
				});
				
				//按月--12个月
				$(".month2").click(function(){
					groupbyType = 'month';
					beginDate = yearDate;
					twoCharts();
				});
			}
			$(function(){
				tabWeek('.list-week li')
			})
			
			firstCharts(); //第一张折线图
			twoCharts(); //第二张折线图
			
			//日、周、月  --默认按日--第一张折线图
			function firstCharts(){
				var param = {};
				param["statisticsType"] = statisticsType;
			    param["groupbyType"] = groupbyType;
			    param["beginDate"] = beginDate;
			    param["endDate"] = endDate;
			
			    var aRequestData = JSON.stringify(param);
							    
			    function aSuccessFunc(data){
			    	if(data.code == '1'){
			    		if(groupbyType == 'day'){
			    			firstXAxi = ["",data.info.x[0],"","至","",data.info.x[6],""];
			    		}else if(groupbyType == 'week'){
			    			firstXAxi = ["","","",data.info.x[0],"","","至","","",data.info.x[12],"","",""];
			    		}else{
			    			firstXAxi = ["","",data.info.x[0],"","","至","","",data.info.x[11],"","",""];
			    		}
			    		firstYAxi = data.info.y;
			    		lineChart();
				    	console.log(data);
			    	}else if(data.code == '0'){
			    		//mui.alert(data.msg);
			    		console.log(data);
			    	}
			     }
			    function aErrorFunc(){
			       console.log('未知错误');
			    }
			    
				httpAjaxSession('POST','/trade/tradeAnalysis', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
			}
			
			//日、周、月  --默认按日 --第二张折线图
			function twoCharts(){
				var param = {};
				param["statisticsType"] = statisticsTypeTwo;
			    param["groupbyType"] = groupbyType;
			    param["beginDate"] = beginDate;
			    param["endDate"] = endDate;
			
			    var aRequestData = JSON.stringify(param);
							    
			    function aSuccessFunc(data){
			    	if(data.code == '1'){
			    		if(groupbyType == 'day'){
			    			twoXAxi = ["",data.info.x[0],"","至","",data.info.x[6],""];
			    		}else if(groupbyType == 'week'){
			    			twoXAxi = ["","","",data.info.x[0],"","","至","","",data.info.x[12],"","",""];
			    		}else{
			    			twoXAxi = ["","",data.info.x[0],"","","至","","",data.info.x[11],"","",""];
			    		}
			    		//twoXAxi = data.info.x;
			    		twoYAxi = data.info.y;
			    		lineChartTwo();
				    	console.log(data);
			    	}else if(data.code == '0'){
			    		//mui.alert(data.msg);
			    		console.log(data);
			    	}
			     }
			    function aErrorFunc(){
			       console.log('未知错误');
			    }
			    
				httpAjaxSession('POST','/trade/tradeAnalysis', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
			}
			
			//第一张画布
			function lineChart(){
				var getOption = function(chartType) {
					var chartOption = chartType == 'pie' ? {
						calculable: false,
					} : {
						grid: {
							x: 35,
							x2: 10,
							y: 30,
							y2: 25
						},
						toolbox: {
							show: false,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						animation: false, //去掉动画
						calculable: false,
						xAxis: [{
							show: true,
							type: 'category',
							axisLabel: {
								interval: 0, //横轴信息全部显示
	                            textStyle: {
	                                color: '#969697'
	                            }
	                        },
	                        axisLine:{ //X轴颜色--Y轴同理
								lineStyle:{
									color: '#969697'
								}
							},
							data: firstXAxi
						}],
						yAxis: [{
							type: 'value',
							splitArea: {
								show: true
							},
							axisLabel: {
								rotate: 40,
	                            textStyle: {
	                                color: '#969697'
	                            }
	                        },
	                        axisLine:{ //X轴颜色--Y轴同理
								lineStyle:{
									color: '#969697'
								}
							}
						}],
						series: [{
				            name:'按周',
				            type:'line',
				            smooth:true,
				            symbol: 'none',
				            sampling: 'average',
				            itemStyle: {
				                normal: {
				                    color: '#ec8664'
				                }
				            },
				            areaStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                        offset: 0,
				                        color: '#fbe7e1'
				                    }, {
				                        offset: 1,
				                        color: '#fbe7e1'
				                    }])
				                }
				            },
				           data: firstYAxi
						}]
					};
					return chartOption;
				};
				
				var byId = function(id) {
					return document.getElementById(id);
				};
				
				var lineChart = echarts.init(byId('lineChart'));
				lineChart.setOption(getOption('line'));
			}
			
			//第二张画布
			function lineChartTwo(){
				var getOption = function(chartType) {
					var chartOption = chartType == 'pie' ? {
						calculable: false,
					} : {
						grid: {
							x: 35,
							x2: 10,
							y: 30,
							y2: 25
						},
						toolbox: {
							show: false,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						animation: false, //去掉动画
						calculable: false,
						xAxis: [{
							show: true,
							type: 'category',
							axisLabel: {
								interval: 0, //横轴信息全部显示
							    //rotate: 60, //60度角倾斜显示
	                            textStyle: {
	                                color: '#969697'
	                            }
	                        },
	                        axisLine:{ //X轴颜色--Y轴同理
								lineStyle:{
									color: '#969697'
								}
							},
							data: twoXAxi
						}],
						yAxis: [{
							type: 'value',
							splitArea: {
								show: true
							},
							axisLabel: {
								rotate: 40,
	                            textStyle: {
	                                color: '#969697'
	                            }
	                        },
	                        axisLine:{ //X轴颜色--Y轴同理
								lineStyle:{
									color: '#969697'
								}
							}
						}],
						series: [{
				            name:'按日',
				            type:'line',
				            smooth:true,
				            symbol: 'none',
				            sampling: 'average',
				            itemStyle: {
				                normal: {
				                    color: '#ec8664'
				                }
				            },
				            areaStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                        offset: 0,
				                        color: '#fbe7e1'
				                    }, {
				                        offset: 1,
				                        color: '#fbe7e1'
				                    }])
				                }
				            },
				           data: twoYAxi
						}]
					};
					return chartOption;
				};
				
				var byId = function(id) {
					return document.getElementById(id);
				};
				
				var lineChart = echarts.init(byId('lineChartTwo'));
				lineChart.setOption(getOption('line'));
			}
    	</script>
    	
	</body>
</html>
